.button {
  position: relative;
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color__black--300);
  border-radius: 0.25rem;
  -webkit-app-region: no-drag;
  background-color: var(--color__black--050);
  box-shadow: 0 0.125rem 1rem -0.5rem transparent;
  color: var(--color__black--750);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 1.03;
  outline: none;
  text-decoration: none;
  transition: all 0.1s ease-in-out;
  white-space: nowrap;

  &.hasLabel {
    width: auto;
    padding: 0 var(--size__200);
  }

  &:hover {
    box-shadow: 0 0.125rem 0.5rem -0.5rem var(--color__black--800)
  }

  &:hover,
  &:focus-visible {
    border: 1px solid var(--color__black--400);
    background-color: var(--color__black--100);
    color: var(--color__black--900);
  }

  &:active {
    border: 1px solid var(--color__black--500);
    background-color: var(--color__black--150);
    color: var(--color__black--900);
  }

  &[disabled] {
    background-color: var(--color__white);
    color: var(--color__black--600);
    cursor: not-allowed;
    opacity: 0.7;
  }

  &.isSm {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0 var(--size__100);
    font-size: var(--text__small);

    &.hasLabel {
      width: auto;
      padding: 0 var(--size__100);
    }
  }

  &.isLg {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: var(--size__350);


    &.hasLabel {
      width: auto;
      padding: 0 var(--size__250);
    }
  }

  &.outline {
    border: 1px solid rgba(0 0 0 / 32.5%);
    background-color: transparent;
    color: rgba(0 0 0 / 32.5%);

    &:hover,
    &:focus-visible  {
      background-color: rgba(0 0 0 / 25%);
      color: rgba(0 0 0 / 32.5%);
    }
  }

  &.isAlignBaseline {
    align-items: baseline;
  }

  &.isFullWidth {
    width: 100%;
  }

  &.primary {
    border-color: var(--color__blue--500);
    background-color: var(--color__blue--500);
    color: var(--color__blue--050);
    text-shadow: 0 0 0.75rem var(--color__blue--600);

    &:hover,
    &:focus-visible  {
      border-color: var(--color__blue--700);
      background-color: var(--color__blue--600);
      color: var(--color__blue--100);
    }
  }

  &.isSuccess {
    border-color: var(--color__green--600);
    background-color: var(--color__green--500);
    color: var(--color__white);
    text-shadow: 0 0 0.75rem var(--color__green--600);

    &:hover,
    &:focus-visible  {
      border-color: var(--color__green--600);
      background-color: var(--color__green--600);
      color: var(--color__green--050);
    }
  }

  &.isDanger {
    color: var(--color__red--600);

    &:hover,
    &:focus-visible      {
      color: var(--color__red--650);
    }
  }

  &.isNaked {
    height: auto;
    padding: 0 var(--size__050);
    border-color: transparent;
    background-color: transparent;

    &:hover {
      text-decoration: underline;
    }
  }
}

.icon {
  vertical-align: middle;

  .hasLabel & {
    margin-right: var(--size__100);
  }

  .isAlignBaseline & {
    position: relative;
    top: 0.125rem;
  }
}
